<!-- ajax로 페이지스크롤시 하단에 이르면 글목록을 자동으로 추가해 주는 기능 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="ajax.js"></script>
<script src="../js/dom.js"></script>
<script src="../js/winSize.js"></script>
<script>
	var curPage= 1;
	var loading = false;	

	function makePost(elem){
		var data = getData(elem);
		var div = document.createElement("div");
		div.className = "post";
		
		var h2 = document.createElement("h2");
		h2.innerHTML="<a href='"+data.link+"'>"+data.title+"</a>";
		div.appendChild(h2);
		
		var small = document.createElement("small");
		small.innerHTML = data.pubDate;
		div.appendChild(small);
		
		var entry = document.createElement("div");
		entry.className = "entry";
		entry.innerHTML = data.desc;
		div.appendChild(entry);
		
		var p = document.createElement("p");
		p.className="postmetadata";
		p.innerHTML="<a href='"+data.link+"#comments'>Comment</a>";
		div.appendChild(p);		
		
		return div;
	}
	
	function getData(elem){
		return {
			title:elem.getElementsByTagName("title")[0].firstChild.nodeValue,
			desc:elem.getElementsByTagName("description")[0].firstChild.nodeValue,
			link:elem.getElementsByTagName("link")[0].firstChild.nodeValue,
			pubDate:new Date(elem.getElementsByTagName("pubDate")[0].firstChild.nodeValue)
		};
	}
	
	function ajaxLoad(){
		ajax({
			type:"get",
			url:"data.xml",
			data:"xml",
			onSuccess:function(rss){
				var content = document.getElementById("content");
				var items = rss.getElementsByTagName("item");
				for(var i = 0;i<items.length;i++){
					content.appendChild(makePost(items[i]));
				}
				if(items.length==0){
					curPage = 0;
				}
			},
			onComplete:function(){
				loading = false;
			}
		});
	}
	function dataLoad(){
		ajaxLoad();
	}
	
	function newLoad(){
		if(curPage>=1 && !loading && pageHeight()-scrollY()-windowHeight() < windowHeight()){
			loading = true;
			ajaxLoad();
		}
	}
	window.onload = function(e){
		dataLoad();
		/* setInterval(function(){
			ajaxLoad();
		},5000); */
	}
	window.onscroll = function(e){
		newLoad()
	}
</script>
</head>
<body>
<div id="page">
	<div id="header">
		<div id="content">
		
		</div>
	</div>
</div>
</body>
</html>